<template>
  <view class="aftersale-list">
    <view class="aftersale-item" v-for="item in listData" :key="item.id">
      <view class="aftersale-item-header">
        <view class="after-item-code"><fui-text text="售后单号" size="28" fontWeight="bold"></fui-text><fui-text text="DD45138489163" :padding="[0, '20rpx']" size="28" fontWeight="bold"></fui-text></view>
        <view class="after-item-dealstatus" v-if="item.dealStatus"><fui-text :text="AFTERSALE_DEAL_STATUS[item.dealStatus].name" size="28" color="#ea5750" fontWeight="bold"></fui-text></view>
      </view>
      <view class="aftersale-item-content">
        <image class="aftersale-item-image" src="/static/images/shopimg.png"></image>
        <view class="aftersale-item-info">
          <fui-text class="aftersale-item-title" text="天水花牛苹果5斤装天水花牛苹果5斤装天水花牛苹果5斤装天水花牛苹果5斤装" size="28" fontWeight="bold"></fui-text>
          <view class="aftersale-item-text">
            <view class="aftersale-item-price"><fui-text text="￥" size="24" fontWeight="bold"></fui-text><fui-text :text="utils.moneyFormatter(2500)" size="32" fontWeight="bold"></fui-text></view>
            <view class="aftersale-item-num"><fui-text text="x" size="24" color="#666"></fui-text><fui-text text="50" size="24" color="#666"></fui-text></view>
          </view>
          <view class="aftersale-item-refund"><fui-text text="退款金额" size="28" color="#666"></fui-text><fui-text text="￥" size="24" color="#ea5750"></fui-text><fui-text :text="utils.moneyFormatter(2500)" size="40" color="#ea5750" fontWeight="bold"></fui-text></view>
        </view>
      </view>
      <view class="aftersale-item-footer">
        <view class="after-item-status" v-if="item.status"><fui-text :text="AFTERSALE_CHILD_STATUS[item.status].name" size="24" color="var(--fui-color-primary)"></fui-text></view>
        <view class="after-item-btns">
          <fui-button width="140rpx" height="46rpx" borderColor="#999" background="#fff" radius="22rpx" size="24" color="#333">联系买家</fui-button>
          <fui-button v-if="item.status <= 24" width="116rpx" height="46rpx" background="#ea5750" radius="22rpx" size="24" @click="handleToView(item)">去处理</fui-button>
          <fui-button v-else width="116rpx" height="46rpx" background="var(--fui-color-primary)" radius="22rpx" size="24" @click="handleToView(item)">去发货</fui-button>
        </view>
      </view>
    </view>
    <fui-loadmore :state="moreState"></fui-loadmore>
  </view>
</template>

<script setup>
import { ref, inject, watch } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { AFTERSALE_CHILD_STATUS, AFTERSALE_DEAL_STATUS } from './consts'
import utils from '@/components/firstui/fui-utils'
import aftersaleApi from '@/api/aftersale'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

const props = defineProps({
  searchForm: {
    type: Object,
    default: () => {}
  },
})

// 获取售后列表
const moreState = ref(1)
const listData = ref([])
const queryParams = ref({})
const getAftersaleList = async () => {
  try {
    uni.stopPullDownRefresh()
    modal.loading('加载中...')
    const res = await aftersaleApi.getAftersaleList(queryParams.value)
    modal.closeLoading()
    const newData = res.data && res.data.list ? res.data.list : []
    moreState.value = queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total ? 3 : 1
    listData.value = queryParams.value.pageNo > 1 ? [...listData.value, ...newData] : [...newData]
    listData.value = [
      { id: '001', status: 22, dealStatus: 31 },
      { id: '002', status: 23, dealStatus: 32 },
      { id: '003', status: 24, dealStatus: 33 },
      { id: '004', status: 25, dealStatus: 31 },
      { id: '005', status: 26, dealStatus: 34 },
    ]
  } catch (err) {
    modal.closeLoading()
    modal.msgError(err.msg || err || '获取售后列表失败！')
  }
}

// 跳转详情
const handleToView = (row) => {
  tab.navigateTo(`/pages/aftersale/view?aftersaleId=${row.id}`)
}

// 搜索条件变更
watch(() => props.searchForm, () => {
  queryParams.value = {
    ...props.searchForm,
    pageNo: 1,
    pageSize: 10
  }
  getAftersaleList()
}, {
  deep: true,
  immediate: true
})

// 下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getAftersaleList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    moreState.value = 2;
    queryParams.value.pageNo++
    getAftersaleList()
  }
})
</script>

<style lang="scss" scoped>
.aftersale-list {
  .aftersale-item {
    overflow: hidden;
    border-radius: 16rpx;
    background-color: #fff;
    margin: 30rpx 0;
    .aftersale-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 78rpx;
      background: linear-gradient(93deg,#e9efff 0%,rgba(255, 255, 255, 0.05) 80%);
      padding: 0 28rpx;
    }
    .aftersale-item-content {
      display: flex;
      justify-content: space-between;
      padding: 28rpx;
      .aftersale-item-image {
        flex: 0 0 132rpx;
        width: 132rpx;
        height: 132rpx;
        margin-right: 30rpx;
      }
      .aftersale-item-info {
        flex: 1;
        overflow: hidden;
        .aftersale-item-title {
          width: 100%;
          margin-bottom: 40rpx;
          ::v-deep .fui-text__content {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .aftersale-item-text {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 32rpx;
        }
        .aftersale-item-refund {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
    .aftersale-item-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 2rpx solid #f1f1f1;
      margin: 0 28rpx;
      padding: 28rpx 0;
      .after-item-status {
        height: 42rpx;
        border: 2rpx solid #999;
        border-radius: 8rpx;
        padding: 0 12rpx;
        line-height: 36rpx;
      }
      .after-item-btns {
        display: flex;
        ::v-deep .fui-button__wrap {
          margin-left: 20rpx !important;
        }
      }
    }
  }
}
</style>